<script setup>
import {ref, reactive, onMounted} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ElementPlus from "element-plus";
import axios from "axios"; // 引入element-plus组件

// 表格数据
const tableData = ref([])
const initData = () => {
  axios.get(`/dish/ingredientCategory/${pageNum.value}/${pageSize.value}`).then(res => {
    tableData.value = res.data.obj.data;
    total.value = res.data.obj.total;
  })
}

onMounted(()=>{
  initData();
})

// 分页
const pageNum=ref(1)
const pageSize=ref(10)
let total=ref(1);
//分页组件
const { ComponentSize } = ElementPlus
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  initData();

}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  pageNum.value=val;
  initData();

}



// 对话框相关
// 假设这是当前门店ID（根据你的实际业务获取）
const currentStoreId = ref(1)
const dialogVisible = ref(false)
const dialogTitle = ref('新增分类')
const formData = ref({
  name: '',
  remark: '',
  status: '正常',
  storeId: null
})

// 新增分类
const handleAdd = () => {
  formData.value = {
    name: '',
    remark: '',
    status: '正常',
    storeId: currentStoreId.value // 设置当前门店ID
  }
  dialogVisible.value = true

}
// 删除原料类别
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该原料类别吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete(`/dishManage/ingredientCategory/${row.id}`).then(res=>{
      initData();
      ElMessage.success('删除成功!!')
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 确认提交
// 提交表单
const handleConfirm = () => {
  if (!formData.value.storeId) {
    return ElMessage.error('请选择所属门店')
  }

  const submitData = {
    name: formData.value.name,
    remark: formData.value.remark,
    status: formData.value.status === '正常' ? 1 : 0,
    storeId: formData.value.storeId,
    sort: 0, // 默认排序值
    createTime: new Date(),
    updateTime: new Date()
  }

  axios.post(`/dishManage/addIngredientCategory`, submitData)
      .then(res => {
        ElMessage.success('新增成功!')
        dialogVisible.value = false
        initData() // 刷新列表
      })
      .catch(error => {
        ElMessage.error(error.response?.data?.message || '新增失败')
      })
}
</script>

<template>
  <div class="material-category-management">
    <!-- 头部操作区 -->
    <div class="header-section">
      <el-button type="primary" @click="handleAdd">新增原料类别</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="100" align="center" />
      <el-table-column prop="name" label="原料类别" width="200" align="center" />
      <el-table-column prop="remark" label="备注" align="center" />
      <el-table-column prop="status" label="状态" width="120" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #reference>
              <el-tag v-if="scope.row.status===1" class="custom-tag-width" :type="'success'" >正常</el-tag>
              <el-tag v-else class="custom-tag-width" :type="'danger'">禁用</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row }">
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 15, 20, 25]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="分类名称" required>
          <el-input v-model="formData.name" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="正常" />
            <el-radio label="禁用" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<style scoped>
.material-category-management {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-section {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 表格样式调整 */
.el-table {
  margin-top: 20px;
}

.el-table--border {
  border: 1px solid #ebeef5;
}

.el-table th {
  background-color: #f5f7fa;
}

/* 分页样式，让分页居中 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>